CSS 的 transform 屬性值為 <transform-function>，可以把它想像成程式語言裡的函式 (function)，搭配參數，可以展現出平移、旋轉、縮放及傾斜的效果。在平面中，相對於元素的參考點，對 X 軸與 Y 軸進行變化，即為 2D 效果。

Translate (平移轉變)

• translateX
• translateY
• translate

3D：translateZ、translate3d。

translateX

主要用途是對 DOM 元素進行 X 軸方向的平移，以左上角為參考點，轉變 DOM 元素與參考點的距離。

語法：

transform: translateX(x);

參數：<length> | <percentage>

• 可接受長度單位，例如 px、pt、em、rem 等等。
• 可接受百分比，例如 50%、75% 等等。

【查看範例 15-1】圖 a: transform: translateX 範例畫面

可點擊筆者設計的範例，動手調整 translateX 的參數值。

translateY

語法：

transform: translateY(y);

主要用途是對 DOM 元素進行 Y 軸方向的平移，以左上角為參考點，轉變 DOM 元素與參考點的距離。

參數：<length> | <percentage>

• 可接受長度單位，例如 px、pt、em、rem 等等。
• 可接受百分比，例如 50%、75% 等等。

【查看範例 15-2】圖 b: transform: translateY 範例畫面

可點擊筆者設計的範例，動手調整 translateY 的參數值。

translate

語法：

transform: translate(x, [y]);

參數：<length> | <percentage>

• 可接受長度單位，例如 px、pt、em、rem 等等。
• 可接受百分比，例如 50%、75% 等等。
• 只有一參數時，代表 x、y 都使用相同參數值。

【查看範例 15-3】圖 c: transform: translate 範例畫面

可點擊筆者設計的範例，動手調整 translate 的參數值，有 x、y 兩種參數。translate 為 translateX 及 translateY 的集合。

Scale (縮放比例)

• scaleX
• scaleY
• scale

3D：scaleZ、scale3d。

scaleX

主要用途是對 DOM 元素進行 X 軸方向的縮小及放大。

語法：

transform: scaleX(x);

參數：<number>

• 大於 1 的數字為放大，大於 0 小於 1 之間的小數為縮小。
• 負數為往 X 軸另一個方向進行放大或縮小。

【查看範例 15-4】圖 d: transform: scaleX 範例畫面

可以看到範例中，調到 0 的時候，因為倍數為 0 的關係，圖片會消失。調成小於 1 的負數值時，圖片會左右相反。

scaleY

主要用途是對 DOM 元素進行 Y 軸方向的縮小及放大。

語法：

transform: scaleY(y);

參數：<number>

• 大於 1 的數字為放大，大於 0 小於 1 之間的小數為縮小。
• 負數為往 Y 軸另一個方向進行放大或縮小。

【查看範例 15-5】圖 e: transform: scaleY 範例畫面

可以看到範例中，調到 0 的時候，因為倍數為 0 的關係，圖片會消失。調成小於 1 的負數值時，圖片會上下顛倒。

scale

語法：

transform: scale(x, y);

參數：<number>

• 大於 1 的數字為放大，大於 0 小於 1 之間的小數為縮小。
• 負數為往另一個方向進行放大或縮小。

【查看範例 15-6】圖 f: transform: scaleX範例畫面

可以看到範例中，X 軸調到 0 的時候，因為倍數為 0 的關係，圖片會消失。調成小於 1 的負數值時，圖片會左右相反。相對的，Y 軸調成小於 1 的負數值時，圖片會上下顛倒。

可點擊筆者設計的範例，動手調整 scale 的參數值，有 x、y 兩種參數。scale 為 scaleX 及 scaleY 的集合。

Skew (傾斜角度)

• skewX
• skewY
• skew

skewX

從 X 軸方向以設定的角度傾斜。

語法：

transform: skewX(x);

參數：<angle>

• 可接受角度單位，例如 deg、grad、rad、turn
• 為數字搭配角度單位，例如 35deg、50grad

【查看範例 15-7】圖 g: transform: skewX 範例畫面

skewY

從 Y 軸方向以設定的角度傾斜。

語法：

transform: skewY(y);

參數：<angle>

• 可接受角度單位，例如 deg、grad、rad、turn
• 為數字搭配角度單位，例如 45deg、60grad

【查看範例 15-8】圖 h: transform: skewY 範例畫面

skew

從 X 軸方向以設定的 x 角度傾斜。，從 Y 軸方向以設定的 y 角度傾斜。

語法：

transform: skew(x, y);

參數：<angle>

• 可接受角度單位，例如 deg、grad、rad、turn
• 為數字搭配角度單位，例如 55deg、70grad

【查看範例 15-9】圖 i: transform: skew 範例畫面

角度單位說明

比較直覺的用法，建議使用 deg，其它角度單位較少看到有人使用。

Rotate (旋轉)

• rotate

3D：rotateX、rotateY、rotateZ、rotate3d

rotate

進行順時針或逆時針的旋轉。

語法：

transform: rotate(a);

參數：<angle>

• 可接受角度單位，例如 deg、grad、rad、turn
• 為數字搭配角度單位，例如 60deg、30grad

【查看範例 15-10】圖 j: transform: rotate 範例畫面

很直覺的使用，依照設定的角度將元素進行進行順時針或逆時針的旋轉。正數的角度為順時針，負數的角度為逆時針。

Matrix (變形矩陣)

• matrix

3D: matrix3d

matrix

一個可以一次設定六個參數的屬性，分別為：

語法

matrix(a, b, c, d, tx, ty)

參數：<number>

• 只接受數字

【查看範例 15-11】圖 k: transform: matrix 範例畫面

比較特別的是代號 b 和 c 的參數雖然是 skew，但只接受數字，不需要輸入單位。而且只能很微小差異的值。如果 skewX 使用 35deg 這邊也跟著填數字 35，整個 DOM 元素會炸掉喔 ^^"。建議區間 -2 至 2 之間微調即可。

總結

今天的範例花了筆者很多時間，想讓大家可以實際感受一下設定值不同的差別，更快瞭解 transform 屬性如何使用，點範例進去就有和 GIF 示範動圖一樣的界面可以操作喔。

明天依舊是 transform，和 3D 效果有關的屬性值。依舊會有滿滿範例可以玩唷。

文中範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。